<template>
    <div class="fillcontain">
        <head-top></head-top>
        <type-selector></type-selector>
        <div class="table_container">
            <el-table
                v-loading="loading"
                :data="contentList"
                height="600"
                @row-click="clickMe"
                style="width: 100%">
                <el-table-column
                    v-for="{ prop, label} in colConfigs"
                    :key="prop"
                    :prop="prop"
                    :label="label"
                ></el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="20"
                    layout="total, prev, pager, next"
                    :total="count">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import headTop from '@/components/headTop'
    import {mapState} from 'vuex'
    import {Loading} from 'element-ui';
    import TypeSelector from "../components/typeSelector";

    export default {
        name: "contentList",
        components: {
            TypeSelector,
            headTop,
        },
        data() {
            this.colConfigs = [
                {prop: 'id', label: '日期'},
                {prop: 'title', label: '文章名'},
                {prop: 'imgUrl', label: '封面'},
                {prop: 'type', label: '类型'},
                {prop: 'originaldate', label: '文章日期'}
            ]
            return {
                offset: 0,
                limit: 20,
                count: 30,
                currentPage: 1,
            }
        },
        created() {
            this.$store.dispatch('getContentList')
        },
        computed: {
            ...mapState(['contentList']),
            loading: function () {
                if (this.contentList.length === 0)
                    return true
                else
                    return false
            }
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.offset = (val - 1) * this.limit;
                console.log(this.currentPage, this.offset)
                this.$store.dispatch('getContentList',
                    {off: this.offset})

            },
            clickMe(row, event, col) {
                alert(row.data)
            },
        }
    }
</script>

<style scoped>

</style>
